{extend name='admin@main'}

{block name="button"}

{/block}

{block name="content"}
<div class="think-box-shadow" style="text-align: center;">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" id="upload" style="margin-right: 10px;">
        <i class="layui-icon">&#xe67c;</i>数据导入
    </button>
    <table class="layui-table" lay-skin="line">
        <thead>
            <tr class="header"></tr>
        </thead>
        <tbody class="info"></tbody>
    </table>
    <div class="tips">
        <span class="notdata">没有记录哦</span>
    </div>
    
</div>
<script>
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            , url: "{:url('import')}" //上传接口
            , method: 'POST'
            , accept: 'file'//指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            , exts: 'xlsx|xls'//只允许上传excel文件,未设定，那么限制的就是图片的文件格式
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading            
            }
            , done: function (res) {
                layer.closeAll('loading'); //关闭loading
                //上传完毕回调
                if (res.code == 1) {
                    $('.tips').html('');
                    $(".info").html("");
                    //渲染表头数据
                    var header = '';
                    $.each(res.data.header,function(index,item){
                        header += `<th class='text-center nowrap'>${item}</th>`;
                    });
                    $(".header").html(header);
                    //渲染内容数据
                    $.each(res.data.info,function(index,item){
                        var info = `<tr data-dbclick >`;
                        $.each(item,function(k,v){
                            info += `<td class='text-center nowrap'>${v}</td>`;
                        });
                        info += `</tr>`;
                        $(".info").append(info);
                    });
                } else {
                    layer.msg(res.msg, { icon: 5 });
                }
            }
        });
    });

</script>
{/block}
